<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>excel小工具</title>
    <link rel="stylesheet" href="css/element-ui.css">
    <script type="application/javascript" src="js/vue.min.js"></script>
    <script type="application/javascript" src="js/element-ui.js"></script>
    <style>
        body {
            margin: 0;
            font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
            "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
        }
        @font-face {
            font-family: "Nunito";
            font-style: normal;
            font-weight: 400;
            src: local(""),
            url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
        }
        #app {
            height: 100vh;
            text-align: center;
            padding: 0 10px;
        }
        .file-name {
            height: 40px;
            line-height: 40px;
            /*background: #00D1B2FF;*/
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }

        .bg {
            height: 40px;
            line-height: 40px;
            text-align: right;
        }
        .pr20 {
            padding-right: 20px;
        }
        .el-col {
            margin-top: 10px;
        }
        .el-select-dropdown {
            top: -7px;!important;
        }
        .el-select-dropdown__wrap {
            max-height: 200px;!important;
        }
    </style>
</head>

<body>
<div id="app">
    <el-row>
        <el-col :span="4">
            <el-button type="primary" @click="selectFile">选择excel</el-button>
        </el-col>
        <el-tooltip class="item" effect="dark" :content="filePath" placement="top">
            <el-col :span="20" class="file-name">{{filename}}</el-col>
        </el-tooltip>
    </el-row>
    <el-row>
        <el-col :span="4" class="bg pr20">选择拆分标题</el-col>
        <el-col :span="20" style="text-align: left">
            <el-select v-model="titleKey" placeholder="请选择" style="width: 100%;">
                <el-option v-for="(v, k) in options" :key="v" :label="v" :value="k"></el-option>
            </el-select>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4" class="bg pr20">工作表前缀</el-col>
        <el-col :span="20" style="text-align: left">
            <el-input v-model.trim="prefix" placeholder="请输入拆分的工作表前缀，默认为空" style="width: 100%;" clearable="true" maxlength="100"></el-input>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-button type="primary" @click="divideFile" :loading="loadStatus">开始拆分</el-button>
        </el-col>
    </el-row>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            filename: "点击按钮选择excel文件",
            filePath: "点击按钮选择excel文件",
            titleKey: null,
            options: [],
            loadStatus: false,
            prefix: "",
        },
        created() {
            let _this = this;
            // saveSuccess 监听文件生成完成事件
            window.runtime.EventsOn("saveSuccess", res => {
                console.log({
                    "desc": "事件监听回调",
                    "data": res
                })
                if (res.code === 0) {
                    _this.loadStatus = false;
                    _this.$alert("文件拆分完成,文件地址：" + res.data, '提示', {
                        confirmButtonText: '确定',
                    });
                } else {
                    _this.$alert("文件拆分失败，错误：" + res.msg, '提示', {
                        confirmButtonText: '确定',
                    });
                }
            })
        },
        methods: {
            // selectFile 选择文件
            selectFile: function () {
                let _this = this;
                window.go.main.App.SelectFile().then(res => {
                    console.log(res)
                    _this.filePath = res.data.filePath
                    if (res.code === 0) {
                        _this.filename = res.data.filename;
                        _this.filePath = res.data.filePath;
                        _this.options = res.data.titles;
                        _this.titleKey = 0;
                    } else if (res.code === 1) {
                        _this.$alert(res.msg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                })
            },
            // 拆分文件
            divideFile: function () {
                if (this.filePath === "" || this.filePath === "点击按钮选择excel文件") {
                    this.$message.error("请先选择excel文件");
                    return
                }
                if (this.titleKey == null) {
                    this.$message.error("请先选择拆分标题")
                    return
                }
                let _this = this;
                window.go.main.App.DivideFile(this.filePath, this.titleKey, this.prefix).then(res => {
                    if (res.code === 0) {
                        _this.loadStatus = true;
                    } else {
                        _this.$alert(res.msg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                });
            }
        }
    });
</script>
</body>
</html>
